<template>
	<div class="cart-item">
     <swipeout>
    <swipeout-item :threshold=".5" underlay-color="#ccc">
        <div slot="right-menu">
          <swipeout-button @click.native="onButtonClick({shopCarId:cartItem.shopCarId,shopIndex,dianId})" background-color="#D23934">删除</swipeout-button>
        </div>
        <div slot="content" class="demo-content">
           <div class="select" @click="toggleSelect({dianId,shopIndex,select:cartItem.select})">
              <check-icon class="check-icon" :value="cartItem.select" ></check-icon>
            </div>
            <router-link :to="{path:'/goodsDetail',query:{userId:$route.query.userId,goodsId:cartItem.id}}">
            <div class="picture">
              <img :src="cartItem.pic" alt="">
            </div>
            <div class="shop-info">
              <div class="shop-name">
                <span class="des">{{cartItem.name}}</span>
                <span class="shop-count">*{{cartItem.count}}</span>
              </div>
              <p class="shop-other">
                {{cartItem.lables}}
              </p>
              <div class="bottom">
                <span class="cart-item-price">
                  ￥{{cartItem.price|price}}
                </span>
                <div class="count-wrap">
                  <span class="decrement" :class="{disabled:isLtOne}" @click.prevent="decrement">-</span>
                  <input class="count" type="text" v-model="cartItem.count" disabled="disabled">
                  <span class="iecrement" @click.prevent="increment">+</span>
                </div>
              </div>
            </div>
        	</router-link>
        </div>
      </swipeout-item>
     </swipeout>

	
	</div>
</template>
<script>
import { CheckIcon, Swipeout, SwipeoutItem, SwipeoutButton } from "vux";

import { mapMutations, mapActions } from "vuex";
export default {
  name: "cart-item",
  props: {
    shopIndex: {
      type: Number
    },
   dianId: {
      type: Number
    },
    cartItem: {
      type: Object,
      default: false
    }
  },

  components: {
    CheckIcon,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
  },
  computed: {
    isLtOne() {
      return this.cartItem.count <= 1;
    },
    
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions(["incrementShopCount", "toggleSelect", 'onButtonClick',"decrementShopCount"]),
    decrement(dianId, shopIndex) {
      if (this.cartItem.count > 1) {
        this.decrementShopCount({
         dianId: this.dianId,
          shopIndex: this.shopIndex,
          count: this.cartItem.count,
          shopCarId:this.cartItem.shopCarId
        });
      }
       return false
    },
    godetail(id){
        this.$router.push({ path:'/goodsDetail', query: {userId: this.$route.query.userId,goodsId:id}})
                  
    },
    increment() {
      this.incrementShopCount({
       dianId: this.dianId,
        shopIndex: this.shopIndex,
        count: this.cartItem.count,
        shopCarId:this.cartItem.shopCarId
      });
    }
  }
};
</script>
<style lang="less" scoped>
.des{

    height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.demo-content {
  display: flex;
      border-bottom: 1px solid #dcdcdc;
}
.cart-item {
	/deep/[class^="weui-icon-"]:before, 
	/deep/[class*=" weui-icon-"]:before{
		margin-left: 0!important;
		margin-right: 0!important;
  }
  a{
    display:flex;
   flex:1;
  }
  background: #fff;
  display: flex;
  justify-content: space-between;
  .select {
		margin-right: .32rem /* 24/75 */;
		height: 2.393333rem /* 160/75 */;
		display: flex;
		align-items: center;
    /deep/.weui-icon-success-circle,
    /deep/.weui-icon-success,
    /deep/.weui-icon-success::before {
      color: #ff5558;
    }
  }
  .picture {
    width: 2.133333rem /* 160/75 */;
    padding-top:0.26rem;
    img {
      width: 100%;
    }
  }
  .shop-info {
    flex: 1;
     padding-top:0.26rem;
		margin-left: .146667rem /* 11/75 */;
		padding-right: .106667rem /* 8/75 */;
		padding-bottom: .386667rem /* 29/75 */;
    padding-left: .12rem /* 9/75 */;
    
		*{
			line-height: 1;
		}
    .shop-name {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 0.373333rem;
			color: #444444;
			padding-top: .12rem /* 9/75 */;
			.shop-count{
				margin-right: .653333rem /* 49/75 */;
			}
    }
    .shop-other {
      font-size: .32rem /* 24/75 */;
			color: #999999;
			margin-top: .16rem /* 12/75 */;
    }
    .bottom {
      display: flex;
      width: 100%;
      justify-content: space-between;
			align-items: center;
			margin-top: .36rem /* 27/75 */;
			.cart-item-price{
				font-size: .4rem /* 30/75 */;
				color: #444444;
			}
      .count-wrap {
        display: flex;
				margin-right: .573333rem /* 43/75 */;
        height: 0.64rem;
        overflow: hidden;
        span {
          width: 1.093333rem;
          height: 100%;
          line-height: 0.64rem;
          text-align: center;
          border: 0.013333rem solid #999;
          background: #fff;
          &.disabled {
            border: solid 1px #dcdcdc;
            color: #ddd;
          }
        }
        input {
          width: 1.093333rem;
          border: none;
          border: 0.013333rem solid #999;
          text-align: center;
          color: #444444;
              font-weight: 700;
        }
      }
    }
  }
}
</style>

